<template>
  <div class="login-container">
    <div class="content">
      <div class="title">音你心动</div>
      <van-form @submit="onSubmit" label-width="50">
        <van-cell-group inset>
          <!-- 密码登录 -->
          <div v-show="loginMode == 'email'">
            <van-field v-model="username" name="邮箱" label="邮箱" placeholder="邮箱" :rules="[{ required: true, message: '请填写邮箱' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
          </div>
          <!-- 手机号登录 -->
          <div v-show="loginMode == 'mobile'">
            <van-field v-model="username" name="手机号" label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写验证码' }]" />
          </div>
          <!-- 二维码登录 -->
          <div class="qr-code" v-show="loginMode == 'qrCode'">
            <img style="width: 100%; height: 100%" :src="qrurl" alt="" />
            <span v-if="qrCodeOverdue">已过期</span>
          </div>
          <div class="login-mode">
            <span @click="switchLoginMode('qrCode')" :class="loginMode == 'qrCode' ? 'active' : ''"> 二维码登录</span>
            <span @click="switchLoginMode('mobile')" :class="loginMode == 'mobile' ? 'active' : ''">手机号登录</span>
            <span @click="switchLoginMode('email')" :class="loginMode == 'email' ? 'active' : ''">邮箱登录</span>
          </div>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button v-show="loginMode == 'qrCode' ? false : true" style="margin-bottom: 15px" round block type="primary" native-type="submit"> 登录 </van-button>
          <van-button round block type="default"> 注册 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { qrCodeKey, qrCodeLogin, qrCodeState } from '@/api/defaultApi.js'
export default {
  data() {
    return {
      username: '',
      password: '',
      loginMode: 'mobile',
      codeKey: '',
      qrurl: '',
      qrCodeOverdue: false,
      getQrcodeState: null,
    }
  },
  methods: {
    onSubmit(e) {
      this.$router.push({ name: 'index', params: {} })
    },
    //切换登录模式
    switchLoginMode(val) {
      this.loginMode = val
      if (val == 'qrCode') {
        this.$notify('谨慎使用，频繁调用登录接口会被风控')
        qrCodeKey({ timerstamp: new Date().getTime() }).then((res) => {
          if (res.data.code != 200) return
          this.codeKey = res.data.data.unikey
          console.log(res.data.data.unikey)
          this.getQrCode(res.data.data.unikey)
        })
      } else {
        clearInterval(this.getQrcodeState)
        this.$notify('功能未开发，频繁调用登录接口会被检测')
      }
    },
    //获取登录二维码
    getQrCode(key) {
      let obj = {
        key,
        qrimg: 'qrimg',
        timerstamp: new Date().getTime(),
      }
      qrCodeLogin(obj).then((res) => {
        if (res.data.code != 200) return
        this.qrurl = res.data.data.qrimg
        //设置循环定时器，每隔3秒检测二维码状态
        this.getQrcodeState = setInterval(() => {
          //   //n秒后清除循环定时器，不能让它一直调用检测二维码状态接口
          //   setTimeout(() => clearInterval(this.getQrcodeState), 60000)
          qrCodeState({ key, timerstamp: new Date().getTime() }).then((res) => {
            console.log(res.data)
            // 800 为二维码过期,801 为等待扫码,802 为待确认,803 为授权登录成功
            switch (res.data.code) {
              case 800:
                this.qrCodeOverdue = true
                break
              case 801:
                break
              case 802:
                break
              case 803:
                //将cookie保存到浏览器缓存中
                sessionStorage.setItem('token', res.data.cookie)
                this.$router.push({ name: 'index', params: {} })
                clearInterval(this.getQrcodeState)
                break
            }
          })
        }, 3000)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.active {
  color: #409eff;
}
.login-container {
  width: 100%;
  height: 100vh;
  background: url('../../assets/login_bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    width: 8rem;
    height: 16rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 20px;
    .title {
      font-size: 42px;
      margin-bottom: 20px;
      font-family: 'Open24DisplaySt';
      opacity: 0.7;
    }
    .van-form {
      width: 100%;

      .van-cell-group {
        height: 4.3rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 10px !important;
        .qr-code {
          width: 3rem;
          height: 3rem;
          border-radius: 4px;
          margin: auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          span {
            color: #c0c4cc;
          }
        }
        .login-mode {
          padding: 15px;
          color: #909399;
          span {
            margin-right: 10px;
          }
        }
        .van-cell {
          height: 1.5rem;
        }
      }
    }
  }
}
</style>